<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{background-image:url("./src/images/yy.jpg");width:100%;height:721px;position:relative;}
        .box{position:absolute;top:100px;right:100px;background:#fff;width:500px;height:383px;}
        input{color:#000;border:0;border:1px solid #ccc;font-size:12px;padding-left:13px;width:279px;height:33px;}
        .yzm{width:150px;height:33px;}
        .fas{background:#43a41b;width:90px;height:33px;color:#fff;font-size:12px;display:block;position:absolute;top:250px;right:205px;text-align:center;line-height:33px;}
        .btn{width:279px;height:33px;background:#43a41b;font-size:18px;color:#fff;}
        .box .a1{color:#419bf9;}
        .box .a2{color:#419bf9;}
        .box .ipt{width:13px;height:13px;font-size:11px;}
        .p1,.p2,.p3,.p4,.p5{width:200px;height:20px;color:blue;}
        p{margin-block-start:0;margin-block-end:0;margin-inline-start:0px;margin-inline-end:0px;}

    </style>
    <script src="./src/js/jquery.js"></script>
    <script src="./src/js/cookie.tools.js"></script>
</head>
<body>
<div id="box">
    <div class="box">
        <form>
            <p class="p1"></p>
            <p>
               <input placeholder="邮箱/手机" class="utel">
            </p>

            <p class="p2"></p>
            <p>
                <input placeholder="用户名" class="uname">

            </p>

            <p class="p3"></p>
            <p>
                <input placeholder="设置密码" class="upwd">

            </p>

            <p class="p4"></p>
            <p>
                <input placeholder="确认密码" class="upwd2">

            </p>
            <p class="p5"></p>
            <p>
                <input placeholder="手机验证码" class="yzm">
                <span class="fas">获得验证码</span>
            </p>
            <p>
                <input type="checkbox" class="ipt" checked="checked"/>我同意<span class="a1">《用户服务协议》</span>和<span class="a2">《也买酒网隐私协议》</span>
            </p>
            <p><button class="btn">立即注册</button></p>
        </form>
    </div>
</div>
<script>
    $(function(){

        function yzm(){
            return parseInt(Math.random()*10)+String.fromCharCode(parseInt(Math.random()*26)+97)+parseInt(Math.random()*1000)
        }
        $(".fas").on("click",function(){
            $(this).html(yzm())
        });


       $(".btn").on("click",function(){
           var regutel=/(^[\w.\-]+@(?:[a-z0-9]+(?:-[a-z0-9]+)*\.)+[a-z]{2,3}$)|(^1[3|4|5|8]\d{9}$)/;
           if(regutel.test($(".utel").val())){
               $(".p1").html("")
           }else {
               $(".p1").html("请您输入正确的邮箱或手机")
               return false;
           }
           var reguname=/^[a-zA-Z]\w{5,15}$/;
           if(reguname.test($(".uname").val())){
               $(".p2").html("");

           }else {
               $(".p2").html("不能以数字开头");
               return false;
           }
           var regupwd=/^\w{8,16}$/;
           if(regupwd.test($(".upwd").val())){
               $(".p3").html("")
           }else {
               $(".p3").html("密码长度必须为8-16个字符")
               return false;
           }
           var regupwd2=/^\w{8,16}$/;
           if(regupwd.test($(".upwd2").val())){
               $(".p4").html("")
           }else {
               $(".p4").html("两次输入的密码不一致，请重新输入")
               return false;
           }
           if($(".yzm").val()==$(".fas").html()){
               $(".p5").html("")
           }else {
               $(".p5").html("验证码输入错误")
               return false;
           }
           alert("注册成功");
           var strobj=JSON.parse(getCookieByName("origin")||'[]')

           var obj={
               utel:$(".utel").val(),
               uname:$(".uname").val(),
               upwd:$(".upwd").val(),
               upwd2:$(".upwd2").val(),
           }

           strobj.push(obj)
           setCookie("origin",JSON.stringify(strobj),10);

           if(confirm("注册成功,是否立即登录")){
               window.location="loginlogin.html";
           }
           return false;
       })
    })


</script>

</body>
</html>